import { useState, useEffect } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { Select, Tooltip } from "antd";
import { PieChartOutlined, LaptopOutlined, ExportOutlined } from "@ant-design/icons";
import { surveyStore } from "@/stores/survey";
import { HeaderContent } from "../stye";

interface optionType {
  value: string;
  label: string;
}
export default function DataHeader() {
  const location = useLocation();
  const navigate = useNavigate();
  const [options, setOptions] = useState<optionType[]>([]);
  const [surveyId, setSurveyId] = useState("");

  useEffect(() => {
    if (surveyStore.surveyId) {
      setSurveyId(surveyStore.surveyId);
      setOptions(surveyStore.surveyData.map(item => ({ value: item.id, label: item.title })));
    }
  }, []);

  const changeSelect = (value: string) => {
    setSurveyId(value);
    surveyStore.modifySurveyId(value);
  };
  return (
    <HeaderContent>
      <Select
        value={surveyId}
        showSearch
        options={options}
        style={{ width: 380 }}
        filterOption={(input, option) => (option?.label ?? "").toLowerCase().includes(input.toLowerCase())}
        onChange={changeSelect}
      ></Select>
      <div className="anv-list flex align-items">
        <div className={`anv-item${location.pathname === "/data/analysis" ? " select" : ""}`} onClick={() => navigate("/data/analysis")}>
          <PieChartOutlined />
          <div>数据分析</div>
        </div>
        <div className={`anv-item${location.pathname === "/data/answer" ? " select" : ""}`} onClick={() => navigate("/data/answer")}>
          <LaptopOutlined />
          <div>答题数据</div>
        </div>
      </div>
      <Tooltip placement="bottom" title="返回">
        <div className="option" onClick={() => navigate("/project")}>
          <ExportOutlined />
          <span>返回</span>
        </div>
      </Tooltip>
    </HeaderContent>
  );
}
